<template>
  <div>
    <search @choosingData="refreshData"></search>
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :sortable="item.sort"
      >
      </el-table-column>
      <el-table-column label="操作" class="btnArea">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 10px"
            size="mini"
            @click="editor(scope.row.id)"
            :disabled="!permission"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            @confirm="deletePart(scope.row.id)"
            title="确定删除吗？"
          >
            <el-button
              size="mini"
              type="danger"
              :disabled="!permission"
              slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <part-dialog
      :partId="partId"
      :fun="fun"
      v-if="dialogVisible"
      @close="dialogClose"
    ></part-dialog>
    <el-pagination
      layout="prev, pager, next"
      :current-page.sync="page"
      @current-change="changePage"
      :page-size="size"
      :page-count="Math.ceil(total / size)"
    />
  </div>
</template>

<script>
let partApi = require("@/api/part");
import { formatter } from "@/util/formatter";
import store from "@/store";

import search from "./search";
import PartDialog from "@/components/part_dialog";

export default {
  data() {
    return {
      /* 表头信息 */
      tableColumn: [
        {
          prop: "signId",
          label: "编号",
          width: 80,
          sort: true,
        },
        {
          prop: "name",
          label: "零件名称",
          width: 120,
        },
        {
          prop: "specification",
          label: "零件规格",
          width: 160,
        },
        {
          prop: "number",
          label: "零件数量",
          width: 110,
        },
        {
          prop: "surplus",
          label: "剩余数量",
          width: 110,
        },
        {
          prop: "used",
          label: "已使用数",
          width: 110,
        },
        {
          prop: "price",
          label: "单价（元/个）",
          width: 160,
          sort: true,
        },
        {
          prop: "createTime",
          label: "入库时间",
          width: 200,
          sort: true,
        },
      ],
      /* 零件表信息 */
      tableData: [],
      permission: false, //是否有操作数据的权限
      size: 10, //每页条数
      total: 0, //数据总条数
      page: 1, //当前页数
      loading: true, //数据是否处于加载状态
      choosingObj: [], //筛选条件
      dialogVisible: false,
      fun: "editor",
      partId: 0, //零件id
    };
  },
  methods: {
    /* 初始化 */
    init() {
      let role = store.state.UserRole;
      if (role == "管理人员" || role == "物资部长") {
        this.permission = true;
      }
    },
    /* 获取零件列表 */
    async getData(page) {
      let obj = {
        createTime: null,
        maxPrice: null,
        minPrice: null,
        name: null,
        signId: null,
        specification: null,
      };
      let res = await partApi.getPartsData(page, obj, false);
      this.tableData = res.data.list;
      this.total = res.data.total;
      this.loading = false;
    },
    /* 获取零件列表（筛选） */
    async getData2(page) {
      let res = await partApi.getPartsData(page, this.choosingObj, true);
      this.total = res.data.total;
      this.tableData = res.data.list;
    },
    /* 改变当前页数 */
    changePage(page) {
      this.choosingObj.length == 0 ? this.getData(page) : this.getData2(page);
    },
    async refreshData(val) {
      this.page = 1;
      this.choosingObj = val;
      this.getData2(1);
    },
    /* 修改零件信息 */
    editor(id) {
      this.partId = id;
      this.dialogVisible = true;
    },
    /* 删除零件 */
    async deletePart(id) {
      let res = await partApi.deletePart(id);
      this.$notify.success({
        title: "Success",
        message: "删除数据成功",
      });
      this.loading = true;
      setTimeout(() => {
        this.getData(page);
      }, 800);
    },
    /* 对话框已关闭,刷新数据 */
    async dialogClose(val) {
      this.dialogVisible = val;
      this.loading = true;
      setTimeout(() => {
        this.getData(this.page);
      }, 800);
    },
  },
  created() {
    this.init();
    this.getData(1);
  },
  components: {
    search,
    PartDialog,
  },
};
</script>

<style scoped>
</style>